<template>
    <div>
        <navigationBar :backType="2" navigationTitle="充值记录" />

        <dateScreen @changeDate="changeDate" />

        <view class="wrap safe-area">
            <view class="wrap-list">
                <block v-for="(item, index) in list" :key="index">
                    <view class="item" v-if="item">
                        <view class="title fb-28">
                            {{ item.memo }}
                        </view>

                        <view class="subItem flex align-center f-26">
                            <text class="text"> 服务师： </text>
                            <text class="value">
                                {{ item.technician_name }}
                            </text>
                        </view>

                        <view class="subItem flex align-center f-26">
                            <text class="text"> 支付金额： </text>
                            <text class="value subPrice">
                                ￥{{ item.order.price }}
                            </text>
                        </view>

                        <view class="subItem flex align-center f-26">
                            <text class="text"> 充值时间： </text>
                            <text class="value">
                                {{ item.createtime_text }}
                            </text>
                        </view>

                        <view class="price f-36 flex column">
                            <text>{{ item.money }}</text>
                            <text class="balance">余额：{{ item.after }}</text>
                        </view>
                    </view>
                </block>

                <emptyData v-if="list.length == 0" :text="'暂无数据'" />
            </view>
        </view>
    </div>
</template>

<script>
import dateScreen from "@/subPages/components/dateScreen/dateScreen.vue";
import emptyData from "@/components/components/emptyData/emptyData.vue";
import { rechargeRecord } from "@/API/API/recruit.js";
export default {
    components: {
        dateScreen,
        emptyData,
    },
    data() {
        return {
            list: [, , , , , , , , , ,],
            searchtime: "",
        };
    },
    onPullDownRefresh() {
        this.onRefresh();
    },
    onLoad() {
        this.getData();
    },
    methods: {
        onRefresh() {
            this.list = [];
            this.getData();
        },
        changeDate(date) {
            this.searchtime = date;
            this.getData();
        },
        getData() {
            rechargeRecord({ searchtime: this.searchtime, type: 2 }).then(
                (res) => {
                    this.list = res.data.data;
                }
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap-list {
    padding: 0 20rpx;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;

    .item {
        margin-top: 20rpx;
        width: 100%;
        overflow: hidden;
        background-color: white;
        border-radius: 20rpx;
        padding: 30rpx 20rpx;
        box-sizing: border-box;
        position: relative;

        .title {
            color: $title-color;
        }

        .subItem {
            margin-top: 30rpx;
            width: 100%;
            overflow: hidden;
        }

        .subPrice {
            color: $price-color;
        }

        .price {
            color: $price-color;
            position: absolute;
            text-align: right;
            right: 20rpx;
            top: 50%;
            transform: translateY(-50%);
            .balance {
                color: #999999;
                margin-top: 10rpx;
                font-size: 24rpx;
            }
        }
    }
}
</style>
